<template>
	<view class="content">
		<image :src="imgSrc" class="topBgc">
			<uni-notice-bar showIcon showClose single :text="text" />
			<view>
				<uni-grid :column="3" :square="false" :highlight="false" @change="change">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<view class="grid-item-box">
							<image :src="item.url" class="image" mode="aspectFill" />
							<text class="text">{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				imgSrc: require("@/static/img/img/banner01.jpg"),
				text: "详细信息请点击相关图标",
				list: [{
						url: require("@/static/img/img/team.png"),
						text: "战队"
					},
					{
						url: require("@/static/img/img/occupations.png"),
						text: "职业"
					},
					{
						url: require("@/static/img/img/player.png"),
						text: "玩家"
					},
					{
						url:require("@/static/img/img/sight.png"),
						text:"准星设置"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {

				switch (+e.detail.index) {
					case 0:
						uni.navigateTo({
							url: `/pages/team/team`
						});
						break;
					case 1:
						uni.navigateTo({
							url: `/pages/occupation/occupation`
						});
						break;
					case 2:
						uni.navigateTo({
							url: `/pages/occupation/occupation`
						});
						break;
					default:
						uni.navigateTo({
							url:'/pages/notnull/notnull'
						})
				}

			}
		}
	}
</script>
<style>
	.content {
		width: 100vw;
	}

	.swiper-box {
		width: 100vw;
		height: 400rpx;
	}

	img {
		object-fit: cover;
		height: 100%;
		width: 100%;
	}

	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.topBgc {
		width: 100vw;
		height: 400rpx;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>